<template>
    <div class="container">
        <el-card class="box-card" shadow="none" border="none">
            <div slot="header" class="clearfix">
                <el-page-header @back="goBack" :content="title"></el-page-header>
            </div>
            <div class="itinerary_detail_content">
                <el-image style="width: 100%; height: 300px"
                    :src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'" fit="cover"></el-image>
                <!-- <h1>{{ data.name }}</h1> -->
                <span class="name">{{ data.j_name }}</span>
                <el-link icon="el-icon-more"
                    @click.native="() => $router.push({ path: '/user/enterprise_detail', query: { id: itinerary_id, title: '景区详情', user: 'scenic_spot' } })">
                    <i class=""></i> 了解更多</el-link>
                <el-row :gutter="20" style="margin-top:30px">
                    <el-col :span="8">
                        <svg-icon :iconname="'icon-shijian'"></svg-icon> 出发时间：{{ data.start_time }}
                    </el-col>
                    <el-col :span="8">
                        <i class="el-icon-location-outline"></i> 集合点：{{ data.gathering_place }}
                    </el-col>
                    <el-col :span="4" :offset="4">
                        <span class="price">
                            价格 <svg-icon :iconname="'icon-jiage'" />{{ data.price }}
                        </span>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <svg-icon :iconname="'icon-qidian'"></svg-icon> 起点：{{ data.starting_point }}
                    </el-col>
                    <el-col :span="8">
                        <svg-icon :iconname="'icon-zhongdian'"></svg-icon> 终点：{{ data.destination }}
                    </el-col>
                    <el-col :span="8">
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <svg-icon :iconname="'icon-zhusu'"></svg-icon> 住宿安排：<div v-html="data.accommodation"></div>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <svg-icon :iconname="'icon-luxian'"></svg-icon> 具体路线：<div v-html="data.schedule"></div>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <i class="el-icon-user"></i> 当前人数：{{ data.current_number }} / {{ data.maximum }}
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <i class="el-icon-user"></i> 导游：{{ data.g_name }}
                    </el-col>
                    <el-col :span="8">
                        <svg-icon :iconname="'icon-lvhangshe'"></svg-icon> 旅游社：{{ data.j_name }}
                    </el-col>
                    <el-col :span="4" :offset="4">
                        <el-button type="primary" size="mini" @click="book_dialog_visible = true">
                            <i class="el-icon-edit"></i>
                            预约行程</el-button>
                    </el-col>
                </el-row>

                <el-backtop target=".itinerary_detail_content">
                    <el-button type="primary" icon="el-icon-caret-top" circle></el-button></el-backtop>
            </div>

        </el-card>
        <el-dialog title="注意" :visible.sync="book_dialog_visible" width="300px" style="z-index:20" append-to-body center>
            <span slot="title" style="color: #F56C6C;font-size:20px"><i class="el-icon-warning"></i> 注意</span>
            确定要预约<br><span style="font-weight:bold;color:rgb(250,90,77)">{{ data.start_time }}</span>到<span
                style="font-weight:bold;color:rgb(250,90,77)">{{
                    data.destination }}</span>的行程吗?
            <span slot="footer" class="dialog-footer">
                <el-button @click="book_dialog_visible = false" size="medium">取 消</el-button>
                <el-button type="primary" @click="book(data.id)" size="medium">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

import SvgIcon from '@/components/reusable_components/SvgIcon.vue';
export default {
    components: {
        SvgIcon
    },

    data() {
        return {
            divider_visible: true,
            book_dialog_visible: false,
            itinerary_id: null,
            title: '',
            user: '',
            position: [],
            data: {
                id: 0,
                name: "",
                start_time: '',
                end_time: '',
                gathering_place: '',
                accommodation: '',
                starting_point: '',
                destination: '',
                price: '',
                schedule: '',
                current_people: 20,
                guide_name: '',
                agency: '',
                img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            },
        }
    },

    mounted() {
        this.itinerary_id = this.$route.query.itinerary_id // 取得企业id
        // console.log(this.itinerary_id)
        // console.log(typeof this.itinerary_id)
        this.title = this.$route.query.title
        this.user = this.$route.query.user
        this.get_itinerary_detail()
    },

    methods: {
        // 返回上一页
        goBack() {
            this.$router.back()
        },

        async get_itinerary_detail() {
            try {
                const res = await this.$http.post("/itinerary/findxjbyid", {
                    // 携带数据
                    id: this.itinerary_id,
                });
                this.data = res.data.data
            } catch (error) {
                // // console.log(error);
            }
        },


        async book() {
            try {
                const res = await this.$http.post("/itinerary/reserve", {
                    t_id: this.itinerary_id,
                    u_id: sessionStorage.user_id
                })//这里使用和更多页面一样的接口

                if (res.data.data === 1) {
                    this.$message.success('预约成功')
                } else if (res.data.data === 0) {
                    this.$message.error('预约失败')
                } else {
                    this.$message.error('出现问题啦')
                }
                this.book_dialog_visible = false
            } catch (error) {
                // // console.log(error);
            }
        },
    }
}
</script>

<style lang="less" scoped>
.container {
    width: 61.8vw;
    min-width: 950px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);

    .itinerary_detail_content {
        height: 80vh;
        overflow: auto;

        -ms-overflow-style: none;
        /* IE 10+ */

        scrollbar-width: none;
        /* Firefox */

        .name {
            margin-top: 100px;
            font-size: 25px;
            font-weight: 500;
            margin-right: 20px
        }

        .after_name {
            font-size: 2px;

        }

        .price {
            text-align: center;
            font-size: 20px;
            color: rgb(250, 90, 77);
            // border-right: 2px dashed rgb(220, 223, 230);
        }
    }

    .itinerary_detail_content::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }

    .more {
        margin-top: 1vh;
    }

}

.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
</style>